<template>
  <div class="project">
    <div class="project-search">
      <el-form class="search-form" ref="formRef" label-suffix=" :" :model="projectListParams">
        <div class="search-list">
          <el-form-item label="项目状态：">
            <el-radio-group v-model="projectListParams.status" @change="getProjectPageFn">
              <el-radio-button label="全部" value="" />
              <el-radio-button v-for="item in getDict('projectStatus')" :label="item.name" :value="item.id" :key="item.id" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目经理" v-if="!isMe">
            <el-select v-model="projectListParams.userId" placeholder="请选择项目经理" clearable filterable>
              <el-option v-for="item in viewUserList" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="名称/编号">
            <el-input v-model="projectListParams.searchKey" placeholder="请填写"></el-input>
          </el-form-item>
        </div>
        <div class="operation">
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
            <el-button :icon="Refresh" @click="reset(formRef)"> 重置 </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="project-content">
      <div class="content-top">
        <el-button v-auth="'add'" type="primary" :icon="Plus" @click="add"> 新增 </el-button>
        <el-button :icon="Refresh" circle @click="refresh" />
      </div>
      <div class="cot-list-wrap">
        <el-scrollbar>
          <ul ref="listWrapRef" class="cot-list" :style="`--gap: 15px ${gap}px`">
            <li class="list-item" v-for="(item, index) in projectList" :key="index" @click="jump(item.id)">
              <div class="tit-part">
                <div class="tit-left">
                  <!-- <P>
                    <image class="" src=""> </image>
                  </P> -->
                  <p>
                    <span>{{ item.name }}</span>
                    <span>{{ item.code }}</span>
                  </p>
                </div>
                <div @click.stop>
                  <el-dropdown trigger="click" v-auth="{ not: ['update', 'delete', 'export'] }">
                    <span class="el-dropdown-link">
                      <div class="tit-right">...</div>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item v-if="BUTTONS.update" @click="handleEdit(item)"> 编辑 </el-dropdown-item>
                        <el-dropdown-item v-if="BUTTONS.delete" @click="handleDelete(item)">删除</el-dropdown-item>
                        <el-dropdown-item v-if="BUTTONS.export">导出</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
              <div class="progress">
                <p>
                  <span>项目进度</span>
                  <span>{{ item.progress }}%</span>
                </p>
                <p><i :style="`width: ${item.progress}%`"></i></p>
              </div>
            </li>
          </ul>
          <el-empty :image-size="200" v-if="!projectList.length" description="暂无项目" />
        </el-scrollbar>
      </div>
    </div>
    <div v-if="drawerVisible"><Create v-model:drawerVisible="drawerVisible" :project-id="projectId" @change="refresh" /></div>
  </div>
</template>
<script lang="ts" setup>
import { Search, Plus, Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount, computed } from "vue";
import Create from "./components/Create.vue";
import { Project } from "@/api/interface/project";
import { getProjectPage, deleteProject, getProjectList } from "@/api/modules/project";
import { getListAllUser } from "@/api/modules/sys";
import { useRouter } from "vue-router";
import { useDict } from "@/hooks/useDict";
import type { FormInstance } from "element-plus";
/**hook */
import { useHandleData } from "@/hooks/useHandleData";
import { useAuthButtons } from "@/hooks/useAuthButtons";
const { getDict } = useDict(["projectStatus"]);
// import { useUserStore } from "@/stores/modules/user";
/**变量 */
const { BUTTONS } = useAuthButtons();
const formRef = ref<FormInstance>();
const listWrapRef = ref();
let drawerVisible = ref(false);
let gap = ref(15);
let projectListParams = ref({
  currentPage: 1,
  pageSize: 1000,
  userId: "",
  searchKey: "",
  status: ""
});
let projectList: Project.ResProjectData = ref([]);
let projectId = ref("");
const router = useRouter();
// const userStore = useUserStore();
const viewUserList = ref([]);
// computed
const isMe = computed(() => {
  return router.currentRoute.value.path === "/project/profile";
});
/** 方法 */
const reset = (formEl: FormInstance | undefined) => {
  console.log(formEl);
  if (!formEl) return;
  projectListParams.value.userId = "";
  projectListParams.value.searchKey = "";
  refresh();
};
const search = function () {
  getProjectPageFn();
};
const jump = id => {
  router.push("/project/detail?id=" + id);
};
const objResizeObserver = new ResizeObserver(function (entries) {
  const entry = entries[0];
  const cr = entry.contentRect;
  const num = Math.floor(cr.width / 304);
  gap.value = (cr.width - num * 304) / (num - 1);
});
const add = () => {
  projectId.value = "";
  drawerVisible.value = true;
};
const handleEdit = item => {
  projectId.value = item.id;
  drawerVisible.value = true;
};
const handleDelete = async item => {
  await useHandleData(deleteProject, { id: item.id }, `删除【${item.name}】`);
  getProjectPageFn();
};
const getProjectPageFn = async () => {
  try {
    if (isMe.value) {
      const { data } = await getProjectList();
      projectList.value = data;
    } else {
      const { data } = await getProjectPage(projectListParams.value);
      projectList.value = data.records || [];
    }
  } catch (error) {
    console.log(error);
  }
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  viewUserList.value = data;
};
const refresh = () => {
  getProjectPageFn();
};
onBeforeUnmount(() => {
  objResizeObserver.unobserve(listWrapRef.value);
});
onMounted(() => {
  // 观察文本域元素
  objResizeObserver.observe(listWrapRef.value);
  getProjectPageFn();
  getListAllUserFn();
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
